<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>合同</title>

<link href="${pageContext.request.contextPath }/css/metro.css"rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-icons.css"rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-responsive.css"rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath }/js/metro.js"></script>
    <style type="text/css">
<!--
.exampl {
  width: 850px;
  height:550px;
  padding: .625rem 1.825rem .625rem 2.5rem;
  border: 1px #ccc dashed;
  position: relative;
  margin: 0 0 .625rem 0;
  background-color: #ffffff;
}
.exampl:before,
.example:after {
  display: table;
  content: "";
}
.exampl:after {
  clear: both;
}
.exampl:before {
  position: absolute;
  content: attr(data-text);
  text-transform: lowercase;
  left: 1.5rem;
  top: 11.875rem;
  color: gray;
  display: block;
  font-size: 1rem;
  line-height: 1rem;
  height: 1rem;
  text-align: right;
  white-space: nowrap;
  direction: ltr;
  width: 12.5rem;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}</style>
</head>
<body>
   
        <div class="exampl">
            <table class="table border bordered hovered cell-hovered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>专业技术资格名称</th>
                    <th>职称等级</th>
                    <th>取得资格时间</th>
                    <th>职称聘任等级</th>    
                    <th>聘任起始时间</th>
                    <th>聘任终止时间</th>
                    <th>是否具有职业资格</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr class="error">
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr class="warning">
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr class="info">
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr class="success">
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                </tbody>
            </table>
        </div>
    


</body>
</html>